<template>
  <div class="time-line-wrap">
    <div class="time-line" ref="slider"></div>
    <!-- <div class="show-time">asfdf</div> -->
  </div>
</template>

<script>
import noUiSlider from 'nouislider'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      nouislider: null,
      today: dayjs().format('YYYY-MM-DD'),
    }
  },
  props: {
    chooseDate: {
      default: null,
    },
  },
  mounted() {
    this.createTimeLine()

    const nowDate = new Date()
    // const g =
    //   nowDate.getHours() * 60 +
    //   (nowDate.getMinutes() > 15 ? nowDate.getMinutes() - (nowDate.getMinutes() % 15) + 15 : 15)
    // console.log(nowDate.getMinutes() - (nowDate.getMinutes() % 15) + 15)
    // console.log(
    //   g,
    //   this.PrefixInteger(parseInt(Math.round(g) / 60), 2),
    //   this.PrefixInteger(Math.round(g) % 60, 2)
    // )

    // this.nouislider.disable()
    // console.log(this.PrefixNumber('08:00'), this.PrefixNumber('9:30'))
  },
  watch: {
    chooseDate(newVal, oldVal) {
      const starEnd = this.getStarEnd()
      const padding = this.getPadding()
      this.nouislider.updateOptions({
        padding: padding,
      })
      this.nouislider.set(starEnd)
    },
  },
  methods: {
    createTimeLine() {
      const _this = this
      const format = {
        to: (value) => {
          return (
            this.PrefixInteger(parseInt(Math.round(value) / 60), 2) +
            ':' +
            this.PrefixInteger(Math.round(value) % 60, 2)
          )
        },
        from: (value) => {
          return this.PrefixNumber(value)
        },
      }
      const val = this.getPipVal(this.PrefixNumber('08:00'), _this.PrefixNumber('22:00'))
      this.nouislider = noUiSlider.create(this.$refs.slider, {
        start: _this.getStarEnd(),
        range: {
          min: _this.PrefixNumber('08:00'),
          max: _this.PrefixNumber('22:00'),
        },
        padding: _this.getPadding(),
        step: 15,
        margin: 15,
        animationDuration: 1,
        tooltips: true,
        format: format,
        pips: { mode: 'values', density: 2, values: val, format: format },
        connect: true,
        behaviour: 'tap-drag',
      })
    },
    getStarEnd() {
      if (this.chooseDate == this.today) {
        const date = new Date()
        let hour = date.getHours()
        let minutes = date.getMinutes()
        if (minutes < 15) {
          minutes = 15
        } else if (minutes >= 15 && minutes < 30) {
          minutes = 30
        } else if (minutes >= 30 && minutes < 45) {
          minutes = 45
        } else {
          minutes = 0
          hour = hour + 1
        }
        if (hour < 8) {
          hour = 8
        } else if (hour > 21) {
          hour = 21
        }
        // let star = 0
        // if (date.getHours() < 21) {
        //   star =
        //     date.getHours() * 60 +
        //     (nowDate.getMinutes() > 15
        //       ? nowDate.getMinutes() - (nowDate.getMinutes() % 15) + 15
        //       : 15)
        // }

        const starStr = `${this.PrefixInteger(hour, 2)}:${this.PrefixInteger(minutes, 2)}`
        const endStr = `${this.PrefixInteger(hour + 1, 2)}:${this.PrefixInteger(minutes, 2)}`
        return [starStr, endStr]
      } else {
        return ['08:00', '09:00']
      }
    },
    getPadding() {
      const starEnd = this.getStarEnd()
      const leftPadding = this.PrefixNumber(starEnd[0]) - this.PrefixNumber('08:00')
      return [leftPadding, 0]
    },
    getTimeVal() {
      return this.nouislider.get()
    },
    PrefixNumber(time) {
      const times = time.split(':')
      return parseInt(times[0]) * 60 + parseInt(times[1])
    },
    PrefixInteger(num, digit) {
      return (Array(digit).join('0') + num).slice(-digit)
    },
    getPipVal(min, max) {
      var u = []
      var v = Math.ceil(min / 60)
      v = v * 60
      u.push(v)
      while (v + 60 <= max) {
        v += 60
        u.push(v)
      }
      return u
    },
  },
}
</script>

<style scoped>
.time-line-wrap {
  width: 100%;
  padding: 30px 20px;
}

.time-line {
  margin: 10px auto;
}
</style>
